import React, {
	Component
} from 'react';
import {
	inject,
	observer
} from 'mobx-react';
import {
	Tools,
	Button,
	WhiteSpace,
	Bubble,
} from "weaver-mobile";
import '../../../style/changePassword.less';
import Form from './Form';
const getLabel = Tools.getLabel;

@inject('passwordStore')
@observer
export default class ChangePassword extends Component {
	constructor(props) {
		super(props);
	}

	componentDidMount() {
		const {
			passwordStore: store
		} = this.props;

		store.getPasswordSetting();
		document.title = getLabel("518968", "登录密码");
		let search = this.props.location.search
		let doUserSession='';
		if(search){
			doUserSession = this.splitUrl(search).doUserSession||'';
		}
		if(doUserSession=='1'){
			Bubble.warning(getLabel('81626',"首次登录需修改密码！"));
		}
	}

	handleClick = () => {
		const {
			passwordStore: store
		} = this.props;
		let search = this.props.location.search
		let optype='';
		if(search){
			optype = this.splitUrl(search).optype||'';
		}
		store.save({optype});
	}

	splitUrl = (search) => {
		const paramArr = search.slice(1).split("&");
		const obj = {};
		paramArr.forEach(item => {
			const [key, value] = item.split("=");
			obj[key] = value;
		});
		return obj;
	}

	componentWillUnmount() {
		const {
			passwordStore: store
		} = this.props;
		['clearFormField', 'refreshVerificationCode'].forEach(f => {
			store[f]();
		});
	}

	render() {
		const {
			passwordStore: store,
			hasTitle = true
		} = this.props, {
			setComponentStatus,
			saveBtnDisabled,
		} = store;

		setComponentStatus(hasTitle);

		const Title = props => <div className='change-password-title'>{getLabel(83511,'修改密码')}</div>

		const FootButton = props => {
			return (
				<div className='foot-button'>
					<Button 
		     			type='primary'
		     			disabled={saveBtnDisabled}
		     			onClick={this.handleClick}
		     		>{getLabel(86,'保存')}</Button>
				</div>
			)
		}

		return (
			<div className='change-password'>
     			{hasTitle && <Title />}
     			<div className='scroll'>
	     			<WhiteSpace size='lg'/>
	     			<Form store={store}/>
	     			<WhiteSpace size='md'/>
     			</div>
     			<FootButton />
     		</div>
		)
	}
}